<template>
    <!--<el-container> 作为模板的最外层元素，具有响应式布局-->
    <el-container>
      <el-menu
        :default-active="activeIndex"
        :ellipsis="false"
        mode="horizontal"
        text-color="#606266"
        active-text-color="#67C23A"
        class="menu"
      >
        <el-menu-item index="1" style="font-size: 26px; color: #67c23a">
          <router-link to="/">Real World</router-link>
        </el-menu-item>
        <div class="flex-grow" />
        <!--一个空的 <div> 元素，用于占据额外的空间，让其他菜单项靠右显示 -->
        <el-menu-item index="2">
          <i class="el-icon-edit"></i>
          <a href="/article/create">新建文章</a>
        </el-menu-item>
        <el-menu-item index="3">
          <a href="/register">注册</a>
        </el-menu-item>
      </el-menu>
      <el-header>
      <div align="center">
      <h1>Real World博客</h1> 
      <h3>大开你的眼界</h3>
      </div>
      </el-header>
    </el-container>
  </template>
  
  <script setup>
  //从 Vue3 导入 Vue3组合API ref 函数，用于创建响应式引用
  import { ref } from "vue";
  
  //创建一个名为 activeIndex 的响应式引用，初始值为 '3。这表示默认激活的菜单项是"注册"
  const activeIndex = ref("3");
  </script>
  
  <style scoped>
  /* scoped限制css样式仅限于本组件,以免造成冲突 */
  
  /* 设置el-header样式 */
  .el-header {
    background-color: #67c23a; /* 设置背景颜色 */
    color: white; /* 设置文字颜色 */
    height: 100px; /* 设置一个明确的高度，可以根据需要调整 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 20px; /* 设置字体大小 */
  }
  
  .flex-grow {
    flex-grow: 1; /*  让元素占据剩余空间 */
  }
  .menu {
    width: 100%; /* 使菜单占据整个屏幕宽度 */
  }
  .el-menu-item a {
    color: #fff; /* 设置 a 标签的文字颜色为白色 */
    text-decoration: none; /* 移除 a 标签的下划线 */
  }
  </style>
  
  